<template>
    <div>
        <!-- 案例1: -->
        <input type="text" v-model="username">
        <!-- 案例2: -->
        <p>
            <input type="text" placeholder="x" v-model.number="x">+
            <input type="text" placeholder="y" v-model.number="y">=
            <input type="text" placeholder="sum" v-model="sum">
        </p>

        <!-- 案例3 -->
        <p id="user" @click="userObj.age++">{{ userObj.name }}--{{ userObj.age }}</p>
        <!-- 案例7 watchEffect分页监听 -->
        <button @click="currentPage++">page:{{ currentPage }}</button>
        <ul>
            <li v-for="item in schoollist" :key="item.id">{{ item.school_name }}</li>
        </ul>
    </div>
</template>

<script setup>
// watch 侦听器
import { ref, reactive, watch, watchEffect } from 'vue';
import axios from 'axios'
const username = ref('');

// 案例1:监听普通的字符串
// watch(username, (newvalue, oldvalue) => {
//     console.log(newvalue, oldvalue);
// })


// 案例2: 监听getter函数(优点类似于计算属性)
const x = ref(0);
const y = ref(0);
const sum = ref(0);
// watch(() => x.value + y.value, (newvalue, oldvalue) => {
//     console.log(newvalue, oldvalue);
//     sum.value = newvalue
// })

// 案例3: 监听响应式对象中的某一个属性
const userObj = ref({
    name: '兔八哥',
    age: 8
});

// watch(() => userObj.value.age, (newvalue, oldvalue) => {
//     console.log(newvalue, oldvalue);
// })

// 案例4:  监听一个响应式对象
// 注意: 在选项式语法中, 监听对象需要设置深层监听, 而组合式中隐式默认就是深层监听
// 选项式和组合式的区别
// watch(userObj.value, (newvalue) => {
//     console.log('newvalue', newvalue);
// })

//  案例5: 立即监听
// watch(userObj.value, (newvalue) => {
//     console.log('newvalue', newvalue);
// }, { immediate: true })

// 案例6: 使用watchEffect 函数监听数据的变化
// 语法: 在watchEffect 回调函数中,写什么属性, 就监听什么属性
// 注意: 默认初始化就监听, 立即监听
// watchEffect(() => {
//     // console.log(username.value);
//     // console.log(x.value + y.value);
//     // sum.value = x.value + y.value
//     console.log(userObj.value.age);
// })

// 案例7: 使用watchEffect 实现分页监听
const currentPage = ref(1);
let schoollist = ref([]);
// watch(() => currentPage.value, () => {
//     // 请求对应页的数据
//     axios.get('https://api.i-lynn.cn/college', {
//         params: {
//             page: currentPage.value
//         }
//     }).then(res => {
//         console.log('res', res);
//         schoollist.value = res.data.data.list1
//     })
// }, { immediate: true });

// 使用watchEffect 修改上述案例
watchEffect(() => {
    axios.get('https://api.i-lynn.cn/college', {
        params: {
            page: currentPage.value
        }
    }).then(res => {
        console.log('res', res);
        schoollist.value = res.data.data.list1
    })
})

// 案例8: watch 的触发时机,以及获取最新的dom
// 默认情况下，用户创建的侦听器回调，都会在 Vue 组件更新之前被调用。
// 这意味着你在侦听器回调中访问的 DOM 将是被 Vue 更新之前的状态。
// watch(userObj.value, () => {
//     console.log(document.querySelector('#user').innerHTML);
// }, { flush: 'post' })

watchEffect(() => {
    console.log(userObj.value.age);
    console.log(document.querySelector('#user').innerHTML); // 
}, {
    flush: 'post'
})














</script>
<style scoped></style>